@import "~antd/lib/style/themes/default.less";

.item {
  width: 100%;
  // height: 100%;
  padding: 24px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.14);

  .title {
    color: @primary-color;
  }

  .top {
    overflow: hidden;

    .img {
      float: left;
      width: 90px;
      height: 80px;
      background-blend-mode: lighten;
      background-size: cover;
    }
  }

  .action {
    margin-top: 24px;
    width: 100%;

    .btn {
      width: 100%;
      text-align: center;

      &.btn-active {
        background-color: rgb(161, 166, 169);
        color: #fff;

        &:hover,
        &:focus {
          background-color: rgba(161, 166, 169, 0.8);
          border-color: rgba(161, 166, 169, 0.8);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
        }
      }

      &.btn-inactive {

        &:hover,
        &:focus {
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}

.inactive,
.uninstalling,
.installing {
  background-color: #f5f5f5;

  .title {
    color: rgba(0, 0, 0, 0.25);
  }

  .top {
    color: rgba(0, 0, 0, 0.25);

    .img {
      filter: grayscale(100%);
      filter: gray;
    }
  }

}

.installing {
  .title {
    color: @warning-color;
  }

  .btn-installing {
    color: @error-color;

    &:hover,
    &:focus {
      border-color: @error-color;
      box-shadow: 0px 2px 10px rgba(@error-color, 0.3);
    }
  }
}

.uninstalling {
  .title {
    color: @error-color;
  }
}